<template>
  <el-dialog v-model="visible" title="修改小区" width="600px" @close="reset">
    <el-form :model="form" label-width="120px">

      <el-form-item label="小区名称"><el-input v-model="form.name" /></el-form-item>

      <el-form-item label="区域">
        <el-select v-model="form.areaId" placeholder="请选择区域" @change="onAreaChange">
          <el-option v-for="a in areaList" :key="a.id" :label="a.name" :value="a.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="板块">
        <el-select v-model="form.plateId" placeholder="请选择板块">
          <el-option v-for="p in plateList" :key="p.id" :label="p.name" :value="p.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="描述"><el-input v-model="form.description" /></el-form-item>

      <el-form-item label="详细地址"><el-input v-model="form.address" /></el-form-item>

      <el-form-item label="建筑年代"><el-input v-model="form.buildYears" /></el-form-item>

      <el-form-item label="物业价格(元/平)"><el-input v-model="form.propertyPrice" /></el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

/* 弹窗可见 */
const visible = ref(false)

/* 列表数据 */
const areaList  = ref([])
const plateList = ref([])

/* 表单数据 */
const form = ref({
  id: '', name: '', description: '', areaId: '', plateId: '',
  address: '', buildYears: '', propertyPrice: ''
})

/* ---------- 对外暴露 open(id, areas) ---------- */
function openModal (id, areas = []) {
  reset()
  areaList.value = areas                // 直接用父组件传来的区域列表
  loadDetail(id)                        // 拉详情 -> 回显
  visible.value = true
}
defineExpose({ openModal })

/* ---------- 拉详情 & 回显 ---------- */
async function loadDetail (id) {
  const { data } = await axios.get(`/app-dev/community/findById/${id}`)
  if (data.code === 200) {
    Object.assign(form.value, data.data)    // 将返回字段拷进表单
    // 拉板块列表（保证板块 select 有数据）
    await onAreaChange(form.value.areaId)
  } else {
    ElMessage.error('获取详情失败')
  }
}

/* ---------- 区域切换联动板块 ---------- */
async function onAreaChange (areaId) {
  plateList.value = []
  form.value.plateId = ''
  if (!areaId) return
  const { data } = await axios.get(`/app-dev/community/findDictListByParentId/${areaId}`)
  if (data.code === 200) plateList.value = data.data
}

/* ---------- 提交 ---------- */
async function submit () {
  const { data } = await axios.post('/app-dev/community/save', form.value)
  if (data.code === 200) {
    ElMessage.success('修改成功')
    close()
    emit('saved')          // 通知父组件刷新
  } else {
    ElMessage.error(data.message || '保存失败')
  }
}

function close ()  { visible.value = false }
function reset ()  {
  Object.keys(form.value).forEach(k => (form.value[k] = ''))
  plateList.value = []
}

/* ---------- emit ---------- */
const emit = defineEmits(['saved'])
</script>
